<template>
	<view class="details">
		<view class="title1">发布招聘</view>

		<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
			<uni-forms-item label="标题" labelAlign="center" labelWidth="50px" name="title">
				<uni-easyinput v-model="valiFormData.title" placeholder="请输入标题" />
			</uni-forms-item>
			<view class="xinzi">
				<uni-forms-item label="薪资" labelAlign="center" labelWidth="50px" name="xinzi">
					<uni-easyinput v-model="valiFormData.xinzi" placeholder="请输入薪资" />
				</uni-forms-item>
				<text class="xinzi-text">/天</text>
			</view>
			<view class="number">
				<uni-forms-item label="招聘数量" labelAlign="center" labelWidth="70px" name="number">
					<uni-easyinput v-model="valiFormData.number" placeholder="请输入招聘数量" />
				</uni-forms-item>
				<text class="number-text">人</text>
			</view>
			<view class="title">岗位职责</view>
			<uni-forms-item labelWidth="0px" name="responsibility">
				<uni-easyinput type="textarea" v-model="valiFormData.responsibility" />
			</uni-forms-item>
			<view class="title">岗位要求</view>
			<uni-forms-item labelWidth="0px" name="requirement">
				<uni-easyinput type="textarea" v-model="valiFormData.requirement" />
			</uni-forms-item>
		</uni-forms>
		<!-- 动态表单校验 -->
		<button type="primary" @click="submit('valiForm')">提交</button>
	</view>
</template>

<script>
	import axios from "axios"
	export default {
		data() {
			return {
				// 校验表单数据
				valiFormData: {
					title: '',
					xinzi: '',
					number: '',
					responsibility: '',
					requirement: '',
				},
				// 校验规则
				rules: {
					title: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					xinzi: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}, {
							format: 'number',
							errorMessage: '只能输入数字'
						}]
					},
					number: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}, {
							format: 'number',
							errorMessage: '只能输入数字'
						}]
					},
					responsibility: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					requirement: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
				},
			}
		},
		computed: {

		},
		onLoad() {},
		methods: {
			
			// as(){
			// 	const qyname = uni.getStorageSync('userlist')[0].name
			// 	const img = uni.getStorageSync('userlist')[0].img
			// 	const title = this.valiFormData.title
			// 	const xinzi = this.valiFormData.xinzi
			// 	const number = this.valiFormData.number
			// 	const responsibility = this.valiFormData.responsibility
			// 	const requirement = this.valiFormData.requirement
			// 	console.log(qyname,img,title,number,responsibility,requirement);
			// },
			
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).then(res =>{
					const id = uni.getStorageSync('userlist')[0].id
					const qyname = uni.getStorageSync('userlist')[0].name
					const img = uni.getStorageSync('userlist')[0].img
					const title = this.valiFormData.title
					const xinzi = this.valiFormData.xinzi
					const number = this.valiFormData.number
					const responsibility = this.valiFormData.responsibility
					const requirement = this.valiFormData.requirement
					axios.post('/api/adddetails?userid='+id+'&title='+title+'&xinzi='+xinzi+
					'&number='+number+'&qyname='+qyname+'&img='+img+'&responsibility='+responsibility+
					'&requirement='+requirement).then(res =>{
						console.log(res.data);
					})
				})
				.catch(err => {
					console.log('err', err);
				});

			},
		}
	}
</script>

// onLoad: function(data) {
// this.teid = data.id
// }
<style scoped lang="scss">
	.details {
		padding: 20rpx;
	}

	.xinzi,.number {
		display: flex;
		align-items: center;
		.xinzi-text,.number-text {
			font-size: 40rpx;
			font-weight: bold;
			color: #FFCC99;
		}
	}

	.title1 {
		margin: 20rpx 0 20rpx 0;
		font-size: 50rpx;
		font-weight: bold;
		color: #FF6666;
	}

	.title {
		margin: 10rpx 0 10rpx 0;
		font-size: 40rpx;
		font-weight: bold;
		color: #99CCCC;
	}

	// .uni-easyinput {
	// 	width: 80%;
	// }


	.button-group {
		margin: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>
